<script setup lang="ts">
import { onMounted, ref } from "vue";

defineOptions({
    name: "Menu11",
});

const input = ref("");

onMounted(() => {
    console.info("Menu1-1 component mounted");
});
</script>

<template>
    <el-card>
        <div class="dark:text-white">
            <div class="mb-8">
                <h3 class="mb-3">
                    功能测试 - 多级菜单测试
                </h3>
                <p>点击菜单1-1, 分布点击菜单1-2-1, 菜单1-2-2, 菜单 1-3, 菜单 2 体验不同的测试功能吧</p>
            </div>

            <div class="mb-8">
                <h3 class="mb-3">
                    功能测试 - 缓存路由测试
                </h3>
                <p class="mb-2">
                    当前页面是否缓存（可以在菜单管理中修改）：
                    <el-tag v-if="$route.meta?.keepAlive" type="success" size="small" disable-transitions>
                        已缓存
                    </el-tag>
                    <el-tag v-else type="danger" size="small" disable-transitions>
                        未缓存
                    </el-tag>
                </p>
                <el-input v-model="input" placeholder="请输入任意内容后切换页面后返回查看" />
            </div>

            <h3 class="mb-2" />
        </div>

        <div>
            <h3 class="mb-3">
                功能测试 - 页面滚动测试
            </h3>
            <p class="mb-2">
                右下角的回到顶部图标的开关在系统配置中配置
            </p>
            <div class="h-[100vh] bg-amber-200" />
        </div>
    </el-card>
</template>
